<template>
  <div>
    <button @click="infoClick">info:{{ info }}</button>
  </div>
</template>

<script setup>
import { ref, shallowRef, triggerRef, watch } from "vue";
const info = shallowRef({
  name: "jdz",
  age: 18,
  msg: {
    count: 0,
  },
});
const infoClick = () => {
  console.log("点击");
  info.value.age += 1;
  // 强制触发依赖于一个浅层 ref 的副作用，这通常在对浅引用的内部值进行深度变更后使用
  // 应用场景：echart 的 option 性能优化
  triggerRef(info);
};
watch(info, (newValue) => {
  console.log("watch监听info", newValue);
});
</script>

<style scoped>
button {
  padding: 20px 20px;
  background-color: pink;
}
</style>
